﻿@{
    Layout = "~/Views/Shared/_Layout_RTU_block.cshtml";
    ViewBag.Title = "WellList";
}

<div class="xds-no-breadcrumb">

    <div class="full-height">
        <div class="full-height-scroll white-bg border-left">
            <div id="blocktable" style="text-align:center;">
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:1000px">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header" style="padding:5px">
                    <h4 class="modal-title" id="monitorname">Well No.On-Site Monitor</h4>
                </div>
                <div class="modal-body" style="padding:5px 2px 5px 30px;height:455px">
                    <div style="float:left">
                        <figure>
                            <iframe height=455 width=445 id="videopath" src='http://player.youku.com/embed/XMjU1MTM5Nzk4OA==' frameborder=0 allowfullscreen></iframe>
                        </figure>
                    </div>
                    <div id="mapcontainer" class="mapcontainer" style="width:500px;height:455px;left:490px"></div>
                </div>
                <div class="modal-footer clear" style="width:100%">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="closevideo()">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@section Styles {
    @Styles.Render("~/plugins/sweetAlertStyles")
}
@section Scripts {
    @*@Scripts.Render("~/plugins/videoResponsible")*@
    @Scripts.Render("~/plugins/sweetAlert") 
    <script type="text/javascript">
        // Creat JSON url to controller
        var wellAllDataUrl = '@Url.Action("Block", "Map")';
        var wellOfBlockUrl = '@Url.Action("WellOfBlock", "WellList")';
        var div = $('#blocktable');
        var colorplan;
        $(document).ready(function () {
            // Ajax call for table data
            refresh();
        });
        function refresh() {
            if (sessionStorage.blockid == 0 || sessionStorage.blockid == null) {
                div.empty();
                $.ajax({
                    url: wellAllDataUrl,
                    method: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 7) {
                            swal({
                                title: "Welcome in Alerts!",
                                text: "Authority error."
                            });
                        }
                        else {
                            $.each(data.data, function (i, item) {
                                fillblocktable(item.ID, item.Name);
                            })
                        }
                    },
                    error: function () {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                        });

                    }
                });
            }
            else {
                div.empty();
                fillblocktable(sessionStorage.blockid, sessionStorage.blockname)
            }
        }
        function fillblocktable(blockid, blockname) {
            $.ajax({
                url: wellOfBlockUrl,
                method: 'GET',
                dataType: 'json',
                async: false,
                data: { blockid: blockid },
                success: function (data) {
                    if (data.status == 7) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "Authority error."
                        });
                    }
                    else {
                        //div.append('<div class="row"><div class="col-lg-12"><div class="ibox-title"><h5>' + blockname + '</h5></div><div class="ibox-content"><table class="table table-striped" id="ajaxTable' + blockid + '"><thead><tr><th style = "text-align:center;">油井编号</th><th style = "text-align:center;">油井名称</th><th style = "text-align:center;">油井状态</th><th style = "text-align:center;">监控链接</th></tr></thead><tbody></tbody></table></div></div></div>')
                        div.append('<div class="row"><div class="col-lg-12"><div class="ibox-title"><h5>' + blockname + '</h5></div><div class="ibox-content"><table class="table table-striped" id="ajaxTable' + blockid + '"><thead><tr><th style = "text-align:center;">Well No.</th><th style = "text-align:center;">API No.</th><th style = "text-align:center;">Status</th><th style = "text-align:center;">Monitor</th></tr></thead><tbody></tbody></table></div></div></div>')
                        littlediv = $('#ajaxTable' + blockid);
                        $.each(data.data, function (i, item) {
                            //littlediv.append('<tr><td>' + item.Name1 + '</td><td>' + item.Name2 + '</td><td>' + item.Chinese + '</td><td><button type="button" onclick="gotowell(' + item.ID + ',\'' + item.Name1 + '\')" class="btn btn-xs btn-primary">云监控</button>&nbsp;<button type="button" onclick="gotomodel(' + item.ID + ',\'' + item.Name1 + '\',' + item.BLOCK_ID + ')" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal">现场</button></td></tr>'
                            littlediv.append('<tr><td>' + item.Name1 + '</td><td>' + item.Name2 + '</td><td>' + item.Status + '</td><td><button type="button" onclick="gotowell(' + item.ID + ',\'' + item.Name1 + '\')" class="btn btn-xs btn-primary">Intelli-Cloud</button>&nbsp;<button type="button" onclick="gotomodel(' + item.ID + ',\'' + item.Name1 + '\',' + item.BLOCK_ID + ')" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal">On-site</button></td></tr>'
                                );
                        })
                    }
                },
                error: function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                    });

                }
            });
        }
        function gotowell(id,name) {
            sessionStorage.wellid = id;
            sessionStorage.wellname = name;
            window.open("/FirstPage/Index", "_self")
        }
        function gotomodel(id, name, blockid) {
            $.ajax({
                url: "/Map/ColorPlan",
                method: 'GET',
                dataType: 'json',
                data: { blockid: blockid },
                async: false,
                success: function (data) {
                    colorplan = data;
                }
            });
            $("#mapcontainer").empty();
            $.ajax({
                url: "/WellList/OneWellOfBlock",
                method: 'GET',
                dataType: 'json',
                data: { wellid: id },
                async: false,
                success: function (data) {
                    if (data.status == 7) {
                        swal({
                            title: "Welcome in Alerts!",
                            text: "Authority error."
                        });
                    }
                    else if (data.status == 0) {
                        $("#mapcontainer").css("background-image", "url(http://104.219.42.52:8888" + data.oneblock.MapPath + ")");
                        //$.each(data.data, function (i, item) {
                        //    $("#mapcontainer").append('<div class="mark-container popover-show" id="' + item.ID + '" data-toggle="popover" style="left:' + item.Width + ';top:' + item.Height + '"><div class="pin bg' + item.Status + '"><span class="num">' + item.ID + '</span></div><div class="pulse ' + item.Status + '"></div></div>')
                        //});
                        $("#mapcontainer").append('<div class="mark-container" id="' + data.data.ID + '" style="left:' + data.data.Width * 100 + '%;top:' + data.data.Height * 100 + '%; background-color:' + colorplan.data.WellBg + '; border:10px double ' + colorplan.data.WellBorder + '; transform:rotate(' + data.data.Angle + 'deg);"></div>')
                    }
                },
                error: function () {
                    swal({
                        title: "Welcome in Alerts!",
                        text: "The connection between server and units is not very stable. For any technical assistant, please call 1-(517)-927-5910."
                    });

                }
            });
            $("#monitorname").text("Well No." + name + " On-Site Monitor");
            $("#videopath").attr("src", "http://player.youku.com/embed/XMjU1MTM5Nzk4OA==");
        }
        function closevideo() {
            $("#videopath").attr("src", null);
        }
    </script>
}